// var type = "WebGL"
// if (!PIXI.utils.isWebGLSupported()) {
//   type = "canvas"
// }
// console.log(type)
// PIXI.utils.sayHello(type)
// //Create the renderer
// PIXI.WebGLRenderer PIXI.CanvasRenderer
document.querySelector('audio').volume = '0.5';
let app = new PIXI.Application({
  width: 1200, // default: 800 宽度
  height: 675, // default: 600 高度
  antialias: true, // default: false 反锯齿
  transparent: false, // default: false 透明度
  resolution: 2 // default: 1 分辨率
});
app.renderer.view.style.position = 'absolute';
app.renderer.view.style.display = 'block';
app.renderer.autoResize = true;
// app.renderer.resize(800, 450);
app.renderer.autoResize = true;
app.renderer.backgroundColor = 0xff0000;
document.body.appendChild(app.view);

var stage = new PIXI.Container();
PIXI.Loader.shared.add('lead-bat', './img/lead-bat.png').load(setup);
PIXI.Loader.shared.onError.add(() => {
  console.log('错误');
});
// // 在整个过程中，可以发出多个信号。
// loader.onProgress.add(() => {}); // 每个加载/错误的文件调用一次
// loader.onError.add(() => {}); // 每个错误文件调用一次
// loader.onLoad.add(() => {}); // 每个加载文件调用一次
// loader.onComplete.add(() => {}); // 排队的资源全部加载时调用一次。
function setup (loader, resources) {
  console.log(loader);
  console.log(resources);
  let bat = new PIXI.Sprite(resources['lead-bat'].texture);
  app.stage.addChild(bat);
  // document.body.addEventListener('click', () => {
  // 隐藏
  //   bat.visible = false;
  // });
  bat.position.set(app.screen.width / 2, app.screen.height / 2);
  // bat.x = 500;
  // bat.y = 50;
  // bat.width = 80;
  // bat.scale.x
  bat.scale.set(1, 1);
  bat.rotation = Math.PI / 180 * 150;

  // postiion 默认0为左上角, 0.5即为图像自身的一半
  bat.anchor.set(0.5, 0.5);
  bat.pivot.set(120, 100);
}
const loaderhj = new PIXI.Loader();
loaderhj.add('hj', './img/css_sprites.png').load((loader, resources) => {
  // PIXI.utils.TextureCache 也可以取出
  // console.log(PIXI.utils.TextureCache['hj']);
  // console.log(PIXI.utils.TextureCache['./img/css_sprites.png']);
  var hjaText = resources['hj'].texture;
  var hjaText2 = PIXI.utils.TextureCache['hj'];
  let rectangle = new PIXI.Rectangle(14, 12, 60, 60);
  // let rectangle2 = new PIXI.Rectangle(98, 12, 60, 60);
  hjaText.frame = rectangle;
  // hjaText2.frame = rectangle2;
  let hja = new PIXI.Sprite(hjaText);
  // let hja2 = new PIXI.Sprite(hjaText2);
  // hja2.position.set(200, 100);
  hja.position.set(app.screen.width / 2, app.screen.height / 2);
  hja.scale.set(0.5, 0.5);
  app.stage.addChild(hja);
  // app.stage.addChild(hja2);
  // hja.vx = 1;
  // hja.vy = 0;
  // const speed = 1 * 4;
  // app.ticker.add(delta => gameLoop(delta));
  // function gameLoop (delta) {
  //   //Move the cat 1 pixel
  //   if (hja.x > app.screen.width) {
  //     hja.x = -60;
  //   } else {
  //     hja.x += hja.vx;
  //     hja.y += hja.vy;
  //   }
  //   if (hja.y > app.screen.height) {
  //     hja.y = 0;
  //   }
  //   if (hja.y < 0) {
  //     hja.y = app.screen.height;
  //     console.log(hja.y);
  //   }
  // }
  // let keyObjectW = keyboard('w');
  // keyObjectW.press = () => {
  //   hja.vy = -speed;
  // };
  // keyObjectW.release = () => {
  //   hja.vy = 0;
  // };
  // let keyObjecta = keyboard('a');
  // keyObjecta.press = () => {
  //   hja.vx = -speed;
  // };
  // keyObjecta.release = () => {
  //   hja.vx = 0;
  // };
  // let keyObjects = keyboard('s');
  // keyObjects.press = () => {
  //   hja.vy = speed;
  // };
  // keyObjects.release = () => {
  //   hja.vy = 0;
  // };
  // let keyObjectd = keyboard('d');
  // keyObjectd.press = () => {
  //   hja.vx = speed;
  //   console.log(hja.x);
  // };
  // keyObjectd.release = () => {
  //   hja.vx = 0;
  // };
});
new PIXI.Loader().add('hj2', './img/css_sprites.png').load((loader, resources) => {
  setTimeout(() => {
    var hjaText2 = PIXI.utils.TextureCache['hj2'];
    let rectangle2 = new PIXI.Rectangle(98, 12, 60, 60);
    hjaText2.frame = rectangle2;
    // console.log((hjaText2.frame = [new PIXI.Rectangle(98, 12, 60, 60), new PIXI.Rectangle(98, 12, 60, 60)]));
    let hja = new PIXI.Sprite(hjaText2);
    console.log(hjaText2);
    app.stage.addChild(hja);
  }, 1000);
});
var loader3 = new PIXI.Loader();
loader3.add('tieba', './img/tieba.json').load((loader, res) => {
  const id = res['tieba'].textures;
  let hja = new PIXI.Sprite(id['huaji.png']);
  let yinxian = new PIXI.Sprite(id['yinxian.png']);
  yinxian.position.set(20, 100);
  hja.position.set(app.screen.width / 2, app.screen.height / 2);
  hja.scale.set(0.5, 0.5);
  app.stage.addChild(yinxian);
  app.stage.addChild(hja);

  hja.vx = 1;
  hja.vy = 0;
  const speed = 1 * 4;
  app.ticker.add(delta => gameLoop(delta));
  function gameLoop (delta) {
    if (hitTestRectangle(hja, yinxian)) {
      yinxian.visible = false;
    } else {
    }
    //Move the cat 1 pixel
    if (hja.x > app.screen.width) {
      hja.x = -60;
    } else {
      hja.x += hja.vx;
      hja.y += hja.vy;
    }
    if (hja.y > app.screen.height) {
      hja.y = 0;
    }
    if (hja.y < 0) {
      hja.y = app.screen.height;
      console.log(hja.y);
    }
  }
  let keyObjectW = keyboard('w');
  keyObjectW.press = () => {
    hja.vy = -speed;
  };
  keyObjectW.release = () => {
    hja.vy = 0;
  };
  let keyObjecta = keyboard('a');
  keyObjecta.press = () => {
    hja.vx = -speed;
  };
  keyObjecta.release = () => {
    hja.vx = 0;
  };
  let keyObjects = keyboard('s');
  keyObjects.press = () => {
    hja.vy = speed;
  };
  keyObjects.release = () => {
    hja.vy = 0;
  };
  let keyObjectd = keyboard('d');
  keyObjectd.press = () => {
    hja.vx = speed;
    console.log(hja.x);
  };
  keyObjectd.release = () => {
    hja.vx = 0;
  };
});
app.render(stage);
